// 逻辑复用
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
export function useObserver (apiFn) {
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    // 第一个参数
    target,
    // 第二个参数
    ([{ isIntersecting }], observerElement) => {
      // console.log(isIntersecting)
      if (isIntersecting) {
        apiFn()
        // qin
        stop()
      }
    },
    // 第三个参数
    {
      // 用来控制目标target进入视图
      // 0-1 数值越大要求进入到数口的面剑越大
      threshold: 0.01
    }
  )
  return { target }
}
// 所谓逻辑复用其实就是找到重复代码的地方 再找到可变的地方 把可变的东西抽象成一个参数
// setup函数组合的永远是响应式的状态数据
